<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>学生管理</title>
</head>
<body>
<div id="app">
  <h2>学生列表</h2>
  <input type="text" v-model="searchQuery" placeholder="请输入姓名搜索">
  <table border="1px" width="800px">
    <tr>
      <th>编号</th><th>姓名</th><th>性别</th><th>电话</th><th>住址</th>
    </tr>
    <tr v-for="stu in filteredStudents" :key="stu.id">
      <td>{{ stu.id }}</td>
      <td>{{ stu.name }}</td>
      <td>{{ stu.gender }}</td>
      <td>{{ stu.cellphone }}</td>
      <td>{{ stu.address }}</td>
    </tr>
  </table>
</div>

<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      students: [],
      searchQuery: ''
    },
    computed: {
      // 计算属性：根据 searchQuery 过滤学生列表
      filteredStudents() {
        return this.students.filter(stu =>
                stu.name.includes(this.searchQuery)
        );
      }
    },
    methods: {
      loadStudents() {
        axios.get('http://localhost:8080/findStudents')
                .then(result => {
                  if (result.data.code === 200) {
                    this.students = result.data.data;
                  }
                });
      }
    },
    mounted() {
      this.loadStudents();
    }
  });
</script>
</body>
</html>
